import React, { useState } from 'react';
import styles from './index.module.scss';
import * as Popover from '@radix-ui/react-popover';
import { connect } from 'react-redux';
import { withConsumer } from '../../../context';
import { Plus } from 'lucide-react';
import classNames from 'classnames';

const Comp = (props) => {
  const {
    activeTab,
    value: { controller },
  } = props;
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  return (
    <div className={styles.container}>
      <Popover.Root open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
        <Popover.Trigger asChild>
          <button className={styles.button2}>
            <Plus
              size={18}
              className={classNames([
                styles.plus,
                isSettingsOpen && styles.plusActive,
              ])}
            />
          </button>
        </Popover.Trigger>

        <Popover.Portal>
          <Popover.Content className={styles.settingsPanel} sideOffset={5}>
            <div className={styles.settingsContent}>
              {[
                {
                  key: 'attach',
                  label: 'Attach File',
                  icon: <i className="iconfont icon-a-AttachFile" style={{ fontSize: '16px' }}></i>,
                  disabled: true,
                  onClick: e => e.preventDefault(),
                },
                {
                  key: 'screenshot',
                  label: 'Capture Screenshot',
                  icon: <i className="iconfont icon-a-CaptureScreenshot" style={{ fontSize: '16px' }}></i>,
                  disabled: true,
                },
                {
                  key: 'mention',
                  label: 'Mention Plugin',
                  icon: <i className="iconfont icon-a-MentionPlugin" style={{ fontSize: '16px' }}></i>,
                  disabled: activeTab !='mcp',
                  onClick: e => {
                    if (controller.ChatInput) {
                      var str = controller.ChatInput.state.inputValue + '@'
                      controller.ChatInput.setState({ 
                        showMcpSelect: true,
                        inputValue:str,
                      });
                    }
                  },
                },
              ].map(item => (
                <div
                  key={item.key}
                  className={classNames(styles.settingsItem, { [styles.disabled]: item.disabled })}
                  onClick={item.disabled ? e => e.preventDefault() : item.onClick}
                >
                  <div className={styles.settingsLabel}>
                    {item.icon}
                    <span>{item.label}</span>
                  </div>
                </div>
              ))}
            </div>
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>
    </div>
  );
};

export default withConsumer(
  connect(({ global }) => ({
    global: global,
  }))(Comp),
);
